<template>
	<view class="loginContent" :style="{ height: $height + 'px',width: $width + 'px' }">
		<view class="loginStyle" :style="{ height: $height * 0.6 + 'px',width: $width * 0.9 + 'px' }">
			<view class="flex-allCenter">
				<image :style="{ height: $height * 0.25 + 'px',width: '40%' }" src="../../static/icon/lhlogo.png"/>
			</view>
			<view class="loginMoudle">
				<view class="flex-sub" >
					<view class="flex-row height-xl">
						<view class="text-d text-bold" style="width: 100rpx;">账号：</view>
						<input class="inputStyle" placeholder-class="placeholderStyle" maxlength="20"
						 v-model="username" type="text" placeholder="请输入登录账号"/>
					</view>
					<view class="flex-row height-xl">
						<view class="text-d text-bold">密码：</view>
						<input class="inputStyle" placeholder-class="placeholderStyle" maxlength="20"
						 v-model="password" type="password" placeholder="请输入密码"/>
					</view>
				</view>
				<view class=" flex-allCenter width height-bth">
					<button class="cu-btn lg width-btn bg-orange round" @click="login" >登录</button>
				</view>
			</view>
			<view class="flex-row height-bth margin-top padding-lr" >
				<view class="flex-row justify-start flex-sub text-bold text-blue" >记住密码</view>
				<view class="flex-row justify-end flex-sub text-bold text-blue" >忘记密码</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex";
	import sysConfig from '@/common/config/config.js'
	export default {
		data() {
			return {
				clientId : sysConfig.congifService.client,//客户端Id
				tenantId: sysConfig.congifService.tenant,//租户Id
				grantType:'AppPassword',//应用类型
				username:'wangqiushi',
				password:'123456'
			}
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin"]),
			login(){
				let user = {
					tenantId: this.tenantId,
					clientId: this.clientId,
					grantType: this.grantType,
					username: this.username,
					password: this.password,
				};
				this.mLogin(user).then((res) => {
					if(res.data.code==200){
						this.$tab.navigateTo('/pages/index/index')
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.loginContent{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loginStyle{
		display: flex;
		flex-direction: column;
	}
	
	.loginMoudle{
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
	
	.inputStyle{
		flex: 1;
		height: 60rpx;
		border-bottom: 1rpx #333 solid;
		padding: 0 20rpx;
	}
	
	.placeholderStyle{
		font-size: 28rpx;
	}

</style>
